import { Component } from '@angular/core';
import { AutoUnsubscribe } from 'ngx-auto-unsubscribe-decorator';
import { Store } from '@ngxs/store';
import { LogisticsSelector } from '../store/logistics.selector';

@Component({
  selector: 'app-bill',
  template: `
    <nz-descriptions nzTitle="订单信息" nzBordered>
      <nz-descriptions-item nzTitle="下单时间" [nzSpan]="2">
        {{(bill$|async)?.createTime|date:'yyyy-MM-dd HH:mm:ss'}}
      </nz-descriptions-item>
      <nz-descriptions-item nzTitle="总价(共计)">{{(billTotalPrice$|async) || 0}}</nz-descriptions-item>

      <ng-container *ngFor="let item of (bill$|async)?.data||[];let i=index">
        <nz-descriptions-item [nzTitle]="'商品'+(i+1)+'标题'">{{item.data.name}}</nz-descriptions-item>
        <nz-descriptions-item nzTitle="简介" nzSpan="2">{{item.data.desc}}</nz-descriptions-item>
        <nz-descriptions-item nzTitle="单价">{{item.data.price}}</nz-descriptions-item>
        <nz-descriptions-item nzTitle="数量">{{item.count}}</nz-descriptions-item>
        <nz-descriptions-item nzTitle="总价">{{item.data.price * item.count}}</nz-descriptions-item>
      </ng-container>

      <nz-descriptions-item nzTitle="物流状态" [nzSpan]="3">
        <nz-badge nzStatus="default" nzText="等待出库" *ngIf="1 === (bill$|async)?.status"></nz-badge>
        <nz-badge nzStatus="processing" nzText="运输中" *ngIf="2 === (bill$|async)?.status"></nz-badge>
        <nz-badge nzStatus="success" nzText="已收货" *ngIf="0 === (bill$|async)?.status"></nz-badge>
      </nz-descriptions-item>
    </nz-descriptions>
    <nz-row>
      <button style="margin: 16px auto;"
              routerLink="/plugin/logistics/list" nz-button nzType="primary" nzSize="large">去订单列表
      </button>
    </nz-row>
  `,
  styles: [],
})
export class BillComponent {
  @AutoUnsubscribe() bill$ = this.store.select(LogisticsSelector.bill);
  @AutoUnsubscribe() billTotalPrice$ = this.store.select(LogisticsSelector.billTotalPrice);

  constructor(
      private store: Store,
  ) {
  }
}
